<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <title>Push Companion</title>

  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" href="styles/material.indigo-pink.min.css">
  <script defer src="scripts/material.min.js"></script>
  <link rel="stylesheet" href="styles/index.css">
</head>

<body>

  <header>
    <h1>Push 工具箱</h1>
  </header>

  <main>
    <section>
      <h3>应用 Keys</h3>

      <p><strong>公钥</strong></p>
      <!-- <pre><code class="js-public-key">加载中...</code></pre> -->
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input mdl-textfield_1_input js-public-key" type="text"  />
        <label class="mdl-textfield__label"></label>
      </div>

      <p><strong>私钥</strong></p>
      <!-- <pre><code class="js-private-key">加载中...</code></pre> -->
      <div class="mdl-textfield mdl-js-textfield">
        <input class="mdl-textfield__input mdl-textfield_1_input js-private-key" type="text"  />
        <label class="mdl-textfield__label"></label>
      </div>

      <p>
        <button disabled class="js-refresh-keys mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
          生成新 Keys
        </button>
      </p>
    </section>

    <section>
      <h3>消息发送</h3>

      <h6><strong>订阅体</strong></h6>
      <div class="mdl-textfield mdl-js-textfield">
        <textarea class="mdl-textfield__input" type="text" rows= "3" id="push-subscription" ></textarea>
        <label class="mdl-textfield__label" for="push-subscription">在这添加推送订阅....</label>
      </div>

      <h6><strong>消息体</strong></h6>
      <div class="mdl-textfield mdl-js-textfield">
        <textarea class="mdl-textfield__input" type="text" rows= "3" id="push-data" ></textarea>
        <label class="mdl-textfield__label" for="push-data">在这添加推送消息体....</label>
      </div>

      <p>
        <button disabled class="js-send-push mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect">
          发送Push
        </button>
      </p>
    </section>

  </main>

  <footer>
    <div>
      
    </div>
  </footer>

  <script src="scripts/application-server-key.js"></script>
  <script src="scripts/send-message.js"></script>

</body>
</html>
